<template>
	<view class="container">
		<!-- 自定义导航栏 -->
		<!-- <view class="header-bag">
			<image 
				src="/static/icon-Get-into@3.png" 
				class="back-btn" 
				@click="goBack"
			></image>
			<text class="page-title">收益规则</text>
		</view> -->
		
		<!-- 内容图片 -->
		<view class="content-wrapper">
			<image 
				v-if="contentImageUrl" 
				:src="contentImageUrl" 
				class="content-image" 
				mode="widthFix"
			></image>
			<view v-else class="loading">
				<text>加载中...</text>
			</view>
		</view>
	</view>
</template>

<script>
import { applyApi } from '@/api/index.js'
import config from '@/api/config.js'

export default {
	data() {
		return {
			contentImageUrl: '',
			userIdentity: ''
		}
	},
	
	onLoad() {
		// 获取传递的身份参数
		this.userIdentity = uni.getStorageSync('urlId') || ''
		this.loadContentImage()
	},
	
	methods: {
		// 加载内容图片
		async loadContentImage() {
			try {
				const res = await applyApi.getMoreApply()
				
				if (res.code === 0 && res.data && res.data.lists) {
					const lists = res.data.lists
					let imageUrl = ''
					
					// 根据用户身份选择对应的图片
					switch (this.userIdentity) {
						case '会员':
							imageUrl = lists[0]?.url || ''
							break
						case '合伙人':
							imageUrl = lists[2]?.url || ''
							break
						case '市运营':
							imageUrl = lists[3]?.url || ''
							break
						case '商家':
							imageUrl = lists[4]?.url || ''
							break
						case '厂家':
							imageUrl = lists[5]?.url || ''
							break
						case '云主':
							imageUrl = lists[1]?.url || ''
							break
						default:
							imageUrl = lists[0]?.url || ''
					}
					
					// 拼接完整的图片URL
					if (imageUrl) {
						this.contentImageUrl = config.STATIC_URL + imageUrl
					}
				}
			} catch (error) {
				console.error('获取内容图片失败:', error)
				uni.showToast({
					title: '加载失败',
					icon: 'none'
				})
			}
		},
		
		// 返回上一页
		goBack() {
			// 清除存储的身份标识
			uni.removeStorageSync('urlId')
			uni.navigateBack()
		}
	}
}
</script>

<style scoped>
.container {
	width: 100%;
	min-height: 100vh;
	background-color: #f5f5f5;
}

.header-bag {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: 88rpx;
	background-color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 999;
	border-bottom: 1rpx solid #eee;
}

.back-btn {
	position: absolute;
	left: 30rpx;
	width: 40rpx;
	height: 40rpx;
}

.page-title {
	font-size: 36rpx;
	font-weight: 500;
	color: #333;
}

.content-wrapper {
	padding-top: 88rpx;
	width: 100%;
}

.content-image {
	width: 100%;
	display: block;
}

.loading {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 400rpx;
}

.loading text {
	color: #999;
	font-size: 28rpx;
}
</style>